<template>
  <div>
    <el-card class="box-card" style="width: 100%; height: 15%">
      <el-form
        @submit.native.prevent
        @keyup.enter.native="handleSerach()"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="分类信息">
          <el-input v-model="keyword" placeholder="分类信息"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSerach()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handAdd">添加分类</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 弹出的模态框 -->
    <el-dialog
      style="text-align: center"
      title="分类信息"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="formData">
        <el-form-item label="一级分类" label-width="70px">
          <el-input
            v-model="formData.Category1Name"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="二级分类" label-width="70px">
          <el-input
            v-model="formData.Category2Name"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
        <el-form-item label="三级分类" label-width="70px">
          <el-input
            v-model="formData.Category3Name"
            autocomplete="off"
            style="width: 25vw"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="id" width="60">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.category[0].id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="一级分类" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.category[0].category1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="二级分类" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.category[0].category2
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="三级分类" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.category[0].category3
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.category[0].createdTime
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        background
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
import { GetCategory,addCategpry } from "../api/category";

export default {
  data() {
    return {
      //数据表格的数据元
      tableData: [],

      //模态框默认状态不显示
      dialogFormVisible: false,

      //模态框绑定的信息
      formData: {
        Category1Name: "",
        Category2Name: "",
        Category3Name: "",
      },

      //搜索框绑定的信息
      keyword: "",
      //分页
      pager: {
        pageIndex: 1, // 页码
        pageSize: 10, // 页面大小（每页项目的数量）
        rowsTotal: 30, // 总记录数
      },
    };
  },
  methods: {
    //模糊查询用户
    handleSerach() {
      this.fetchData();
    },
    handSave() {
      if (this.formData.Category1Name !== "" && this.formData.Category2Name !== "" && this.formData.Category3Name !== "") {
        addCategpry(this.formData).then((data) => {
          console.log(data);
          //将数据实时更新到前端页面
          this.fetchData(this.pager);
        });
        this.$message({
          showClose: true,
          message: "恭喜你，添加成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "用户名和密码不能为空",
          type: "warning",
        });
      }

      this.dialogFormVisible = false;
    },
    handAdd() {
      //点击添加时将id制空 表示这是添加
      (this.formData.id = undefined),
        //每次添加时将模态框的数据清空
        (this.formData.username = "");
      this.formData.password = "";
      this.dialogFormVisible = true;
    },

    // 改变页码后，重新拉取数据
    handlePageIndexChange(val) {
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
    },
    // 改变页大小后，重新拉取数据
    handlePageSizeChange(val) {
      this.pager.pageSize = val;
      this.fetchData(this.pager);
    },

    // 拉取数据方法
    fetchData() {
      let params = {
        keyword: this.keyword,
        pager: this.pager,
      };
      console.log(params);
      GetCategory(params)
        .then(({ data }) => {
          console.log(data.category);
          this.tableData = data.category;
          // this.tableData = res.category[0].category;
          this.pager = data.data.pager;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    // 拉取数据
    this.fetchData(this.pager);
  },
};
</script>

<style>
.element.style {
  margin-left: 0px;
}

.el-dialog__footer {
  margin-right: 100px;
}

.el-dialog__body {
  align-content: center;
  justify-content: center;
  display: flex;
}
</style>